<template>
  <div class="friend" v-if="notice.data.length">
    <div class="friend-notice" :style="{ display: 'flex' }" v-for="(item, index) in notice.data">
      <div class="friend-notice-content">
        <img :src="item.friend_info.avatar" />
        <span>{{ item.friend_info.nickname }}</span>
        <span>{{ `(${item.friend_info.username})` }}</span>
        <span v-if="!status">{{ '等待验证' }}</span>
        <span v-else>{{ (status && status === "agree") ? '已同意' : '已拒绝' }}</span>
      </div>
      <div class="friend-notice-content-btn">
        <button @click="hanldeSelect(item.noticeId, 'agree')" :disabled="status">同意</button>
        <button @click="hanldeSelect(item.noticeId, 'reject')" :disabled="status">拒绝</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { userStore } from '@/store/user';
import { ref } from "vue"
import { agreeFriendNotice } from "@/api/notice"

const notice = ref()
const user_store = userStore()
const status = ref()
const userInfo = user_store.$state.userInfo
notice.value = user_store.$state.notice.data

const emit = defineEmits(['selectEmit'])

const hanldeSelect = (id: string, select: string) => {
  agreeFriendNotice({
    operate: select,
    noticeId: id,
    u_info: JSON.stringify(userInfo)
  }).then(res => {
    status.value = select
    emit("selectEmit")
  })
}
</script>

<style scoped lang="less">
.friend {
  margin-top: 80px;
  padding: 0 20px;

  &-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-content {
      display: flex;
      align-items: center;
      margin: 20px 0;

      >img {
        border-radius: 50%;
        width: 40px;
        height: 40px;
      }

      >span {
        line-height: 40px;
        font-size: 26px;

        &:nth-child(4) {
          margin-left: 20px;
          color: #9a9999;
        }
      }

      &-btn {
        display: flex;
        align-items: center;

        >button {
          display: inline-block;
          padding: 0 10px;
          margin: 0 5px;
          border-radius: 10px;
          background-color: #ffffff;
          line-height: 40px;
          font-size: 26px;
          border: none;
        }
      }
    }
  }
}
</style>